{% extends "users/base.html" %}
{% load static %}
{% load app_tags %}

{% block title %}
  Integrations - Yamtrack
{% endblock title %}

{% block settings_content %}
  <div class="bg-[#2a2f35] rounded-lg p-6">
    <div class="flex items-center mb-4">
      {% include "app/icons/database.svg" with classes="w-6 h-6 text-indigo-400 mr-3" %}
      <h2 class="text-xl font-semibold">Integrations</h2>
    </div>
    <p class="text-gray-400 mb-5 text-sm">Connect your media servers to automatically track your watching progress.</p>
    <div class="bg-[#39404b] p-5 rounded-lg mb-6">
      <div class="flex items-center mb-3">
        {% include "app/icons/padlock.svg" with classes="w-5 h-5 text-indigo-400 mr-2" %}
        <h3 class="text-base font-medium">API Token</h3>
      </div>
      <p class="text-gray-400 mb-4 text-sm">This token is used to authenticate webhook requests from your media servers.</p>
      <div class="bg-[#262a2f] p-3 rounded-md mb-4">
        <div class="flex items-center gap-2">
          <input readonly=""
                 id="token"
                 class="flex-1 py-2 pr-2 pl-3 bg-[#262a2f] rounded-md text-gray-300 text-sm border-0 focus:ring-0 outline-none font-mono"
                 type="text"
                 value="{{ user.token|default_if_none:"" }}">
          <span class="flex items-center cursor-pointer group pr-3"
                title="Copy"
                data-copy-target="#token">
            {% include "app/icons/copy.svg" with classes="w-5 h-5 text-gray-400 group-hover:text-indigo-400 transition-colors" %}
          </span>
        </div>
      </div>
      <div class="flex justify-between items-center">
        <div class="flex items-center text-amber-400 text-sm">
          {% include "app/icons/error.svg" with classes="w-4 h-4 mr-2 shrink-0" %}
          <p>Regenerating will invalidate the previous token</p>
        </div>
        <div class="flex space-x-3">
          <form method="post" action="{% url 'regenerate_token' %}">
            {% csrf_token %}
            <button type="submit"
                    class="flex items-center px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors text-sm cursor-pointer">
              {% include "app/icons/circle-spinning-counter-clockwise.svg" with classes="w-4 h-4 mr-2" %}
              Regenerate
            </button>
          </form>
        </div>
      </div>
    </div>
    <div class="bg-[#39404b] p-5 rounded-lg mb-6">
      <div class="flex items-center mb-3">
        {% include "app/icons/server.svg" with classes="w-5 h-5 text-indigo-400 mr-2" %}
        <h3 class="text-base font-medium">Jellyfin Integration</h3>
      </div>
      <p class="text-gray-400 mb-4 text-sm">Connect Jellyfin to automatically track your watching progress.</p>
      <div class="bg-[#262a2f] p-4 rounded-md">
        <h4 class="text-sm font-medium mb-3">Setup Instructions</h4>
        <ol class="list-decimal list-inside space-y-2 text-sm text-gray-300">
          <li>You will need to have TMDB and TVDB as metadata providers in Jellyfin.</li>
          <li>
            Add this repository
            <a href="https://raw.githubusercontent.com/shemanaev/jellyfin-plugin-repo/master/manifest.json"
               target="_blank"
               rel="noopener noreferrer"
               class="text-indigo-400 hover:underline">link</a>
            to your "Plugins Catalog" in Jellyfin settings.
          </li>
          <li>
            In Jellyfin settings, go to "My Plugins" and install the
            <a href="https://github.com/shemanaev/jellyfin-plugin-webhooks"
               target="_blank"
               rel="noopener noreferrer"
               class="text-indigo-400 hover:underline">Unofficial Webhooks plugin</a>.
          </li>
          <li>
            In the Webhooks plugin settings:
            <ul class="list-disc list-inside ml-6 mt-2 space-y-1 text-gray-400">
              {# djlint:off #}
              <li>
                <div class="inline-flex items-center gap-2 w-[calc(100%-30px)]">URL: 
                  <input readonly
                         id="jellyfin-webhook-url"
                         class="w-full bg-[#262a2f] rounded-md text-gray-400 text-sm border-0 focus:ring-0 outline-none font-mono"
                         type="text"
                         value="{{ request.scheme }}://{{ request.get_host }}/webhook/jellyfin/{{ request.user.token|default_if_none:"&lttoken&gt" }}">
                  <span class="flex items-center cursor-pointer group"
                        title="Copy"
                        data-copy-target="#jellyfin-webhook-url">
                    {% include "app/icons/copy.svg" with classes="w-5 h-5 text-gray-400 group-hover:text-indigo-400 transition-colors" %}
                  </span>
                </div>
              </li>
              {# djlint:on #}
              <li>Payload format: Default</li>
              <li>Listen to events only for: Your Jellyfin User</li>
              <li>Events: Play and Stop</li>
            </ul>
          </li>
        </ol>
      </div>
    </div>

    <div class="bg-[#39404b] p-5 rounded-lg mb-6">
      <div class="flex items-center mb-3">
        {% include "app/icons/server.svg" with classes="w-5 h-5 text-indigo-400 mr-2" %}
        <h3 class="text-base font-medium">Plex Integration</h3>
      </div>
      <p class="text-gray-400 mb-4 text-sm">Connect Plex to automatically track your watching progress.</p>
      <div class="bg-[#262a2f] p-3 rounded-md mb-4">
        <h4 class="text-sm font-medium mb-3">Plex Usernames</h4>
        <form method="post"
              action="{% url 'update_plex_usernames' %}"
              class="space-y-2">
          {% csrf_token %}

          <div>
            <p class="text-gray-400 mb-4 text-sm">
              This username (or several, comma separated) will be used to filter which events are sent to your webhook.
            </p>
            <input name="plex_usernames"
                   class="w-full py-2 px-3 bg-[#39404b] rounded-md text-white text-sm border {% if user.plex_usernames.errors %}border-red-500{% else %}border-gray-600{% endif %} focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
                   type="text"
                   placeholder="username1, username2, username3"
                   value="{{ request.user.plex_usernames }}">
          </div>
          <div class="pt-2">
            <button type="submit"
                    class="flex items-center px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors text-sm cursor-pointer">
              {% include "app/icons/save.svg" with classes="w-4 h-4 mr-2" %}
              Save Changes
            </button>
          </div>
        </form>
      </div>
      <div class="bg-[#262a2f] p-4 rounded-md">
        <h4 class="text-sm font-medium mb-3">Setup Instructions</h4>
        <ol class="list-decimal list-inside space-y-2 text-sm text-gray-300">
          <li>You will need to have a PlexPass in order to have webhooks enabled</li>
          <li>Go to Settings > Server > Network and enable Webhooks</li>
          <li>
            In Plex settings, go to <a href="https://app.plex.tv/desktop/#!/settings/webhooks"
    target="_blank"
    rel="noopener noreferrer"
    class="text-indigo-400 hover:underline">Webhooks</a>.
          </li>
          <li>
            In the Webhooks section, click on "Add Webhook" and enter the following URL:
            <ul class="list-disc list-inside ml-6 mt-2 space-y-1 text-gray-400">
              <li>
                <div class="inline-flex items-center gap-2 w-[calc(100%-30px)]">
                  <input readonly
                         id="plex-webhook-url"
                         class="w-full bg-[#262a2f] rounded-md text-gray-400 text-sm border-0 focus:ring-0 outline-none font-mono"
                         type="text"
                         value="{{ request.scheme }}://{{ request.get_host }}/webhook/plex/{{ request.user.token|default_if_none:"&lttoken&gt" }}">
                  <span class="flex items-center cursor-pointer group"
                        title="Copy"
                        data-copy-target="#plex-webhook-url">
                    {% include "app/icons/copy.svg" with classes="w-5 h-5 text-gray-400 group-hover:text-indigo-400 transition-colors" %}
                  </span>
                </div>
              </li>
            </ul>
          </li>
        </ol>
      </div>
    </div>

    <div class="bg-[#39404b] p-5 rounded-lg mb-6">
      <div class="flex items-center mb-3">
        {% include "app/icons/server.svg" with classes="w-5 h-5 text-indigo-400 mr-2" %}
        <h3 class="text-base font-medium">Emby Integration</h3>
      </div>
      <p class="text-gray-400 mb-4 text-sm">Connect Emby to automatically track your watching progress.</p>
      <div class="bg-[#262a2f] p-4 rounded-md">
        <h4 class="text-sm font-medium mb-3">Setup Instructions</h4>
        <ol class="list-decimal list-inside space-y-2 text-sm text-gray-300">
          <li>In Emby, go to Settings > Notifications</li>
          <li>In the Notifications section, click on "Add Notification"</li>
          <li>
            In the Notification settings:
            <ul class="list-disc list-inside ml-6 mt-2 space-y-2 text-gray-400">
              {# djlint:off #}
              <li>
                <div class="inline-flex items-center gap-2 w-[calc(100%-30px)]">URL: 
                  <input readonly
                         id="emby-webhook-url"
                         class="w-full bg-[#262a2f] rounded-md text-gray-400 text-sm border-0 focus:ring-0 outline-none font-mono"
                         type="text"
                         value="{{ request.scheme }}://{{ request.get_host }}/webhook/emby/{{ request.user.token|default_if_none:"&lttoken&gt" }}">
                  <span class="flex items-center cursor-pointer group"
                        title="Copy"
                        data-copy-target="#emby-webhook-url">
                    {% include "app/icons/copy.svg" with classes="w-5 h-5 text-gray-400 group-hover:text-indigo-400 transition-colors" %}
                  </span>
                </div>
              </li>
              {# djlint:on #}
              <li>Request content type: multipart/form-data</li>
              <li>Events: Play and Stop</li>
              <li>Limit user events to: Your Emby User</li>
              <li>"Limit library events to" and "Limit devices events to" are optional</li>
            </ul>
          </li>
        </ol>
      </div>
    </div>
  </div>
{% endblock settings_content %}

{% block js %}
  <script src="{% static 'js/copy-item.js' %}{% get_static_file_mtime 'js/copy-item.js' %}"></script>
{% endblock js %}
